@use '../../_styles/mixin.scss' as *;
@use './var.scss';

.o-card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  text-decoration: none;
}

.o-card-cover {
  flex-shrink: 0;
  padding: var(--card-cover-padding);
}

.o-card-cover-img {
  max-height: 100%;
  width: 100%;
  border-radius: var(--card-cover-radius);

  img {
    border-radius: var(--card-cover-radius);
  }

  &.is-full {
    height: 100%;
  }
}

.o-card-icon {
  color: var(--card-icon-color);
  font-size: var(--card-icon-size);
  text-align: var(--card-icon-text-align);
}

.o-card-header {
  font-size: var(--card-header-text-size);
  line-height: var(--card-header-text-height);
  color: var(--card-header-color);
}

.o-card-title {
  height: calc(var(--card-title-row) * var(--card-header-text-height));
  margin: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-title-text-align);
  word-break: var(--card-title-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-max-row);
  -webkit-box-orient: vertical;
}

.o-card-main {
  padding: var(--card-main-padding);
  height: 100%;
}

.o-card-main-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.o-card-content {
  font-size: var(--card-content-text-size);
  line-height: var(--card-content-text-height);
  color: var(--card-content-color);

  .o-card-header + & {
    margin-top: var(--card-content-gap);
  }
}

.o-card-detail {
  height: calc(var(--card-detail-row) * var(--card-content-text-height));
  max-height: calc(var(--card-detail-max-row) * var(--card-content-text-height));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-detail-text-align);
  word-break: var(--card-detail-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-detail-max-row);
  -webkit-box-orient: vertical;
}

.o-card-hoverable {
  position: relative;
  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
  @include hover {
    box-shadow: var(--card-shadow-hover);
  }
  &:active {
    box-shadow: var(--card-shadow-active);
  }
}

.o-card-hoverable.o-card-cursor-pointer {
  @include hover {
    .o-card-cover img {
      transform: scale(1.05);
    }
  }
  &:active {
    .o-card-cover img {
      transform: scale(1.02);
    }
  }
}

.o-card-footer {
  margin-top: var(--card-footer-gap);
  font-size: var(--card-footer-text-size);
  line-height: var(--card-footer-text-height);
  color: var(--card-footer-color);
}

.o-card-layout-v {
  display: flex;
  flex-direction: column;

  .o-card-main {
    display: flex;
    flex-direction: column;
  }

  .o-card-icon {
    margin-bottom: var(--card-icon-gap);
  }
}

.o-card-layout-h {
  display: flex;
  flex-direction: row;

  .o-card-main {
    display: flex;
    flex-direction: row;
  }

  .o-card-icon {
    margin-right: var(--card-icon-gap);
    width: var(--card-icon-size);
  }
}

.o-card-layout-hr {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;

  .o-card-main {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .o-card-icon {
    margin-left: var(--card-icon-gap);
    width: var(--card-icon-size);
  }
}

.o-card-cover-h,
.o-card-cover-hr {
  width: var(--card-h-cover-width);
  max-width: var(--card-h-cover-max-width);
  display: flex;
  align-items: center;
}

.o-card-cursor-pointer {
  cursor: pointer;
}
